<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="list.apiObj" :params="_dictParam" row-key="id" stripe>
                <sc-table-column label="序号" type="index" width="65"></sc-table-column>
                <el-table-column label="字段名称" prop="columnName" width="200"></el-table-column>
                <el-table-column label="字段注释" prop="columnComment"></el-table-column>
                <el-table-column label="字段类型" prop="type" width="150" :formatter="typeFormatter"></el-table-column>
                <el-table-column label="基础字段" prop="base" width="120" align="center" :filters="filters" :filter-method="filterHandler">
                    <template #default="scope">
                        <el-tag v-if="scope.row.base" effect="dark" round>是</el-tag>
                        <el-tag v-if="!scope.row.base" type="info" round>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="主键" prop="primaryKey" width="80" align="center" :filters="filters" :filter-method="filterHandler">
                    <template #default="scope">
                        <el-tag v-if="scope.row.primaryKey" effect="dark" round>是</el-tag>
                        <el-tag v-if="!scope.row.primaryKey" type="info" round>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="自增" prop="autoIncrement" width="80" align="center" :filters="filters" :filter-method="filterHandler">
                    <template #default="scope">
                        <el-tag v-if="scope.row.autoIncrement" effect="dark" round>是</el-tag>
                        <el-tag v-if="!scope.row.autoIncrement" type="info" round>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="不是null" prop="nullable" width="120" align="center" :filters="filters" :filter-method="filterHandler">
                    <template #default="scope">
                        <el-tag v-if="scope.row.nullable" effect="dark" round>是</el-tag>
                        <el-tag v-if="!scope.row.nullable" type="info" round>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="无符号" prop="unsigned" width="100" align="center" :filters="filters" :filter-method="filterHandler">
                    <template #default="scope">
                        <el-tag v-if="scope.row.unsigned" effect="dark" round>是</el-tag>
                        <el-tag v-if="!scope.row.unsigned" type="info" round>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="默认值" prop="defaultValue" width="250"></el-table-column>
                <el-table-column label="创建时间" prop="createTime" width="180"></el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template #default="scope">
                        <el-button-group>
                            <el-button size="small" @click="table_show(scope.row)" icon="el-icon-view"></el-button>
                            <el-button type="primary" size="small" @click="table_edit(scope.row)" icon="el-icon-edit"></el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button type="danger" size="small" icon="el-icon-delete"></el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>

    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>

</template>

<script>
import saveDialog from './project-dict'

export default {
    name: 'projectDict',
    components: {
        saveDialog
    },
    props: {
        projectId: {type: [String, Number], required: true},
    },
    data() {
        return {
            dialog: {
                save: false
            },
            list: {
                apiObj: this.$API.design.projectDict
            },
            filters: [
                {text: '是', value: true},
                {text: '否', value: false}
            ]
        }
    },
    computed: {
        _dictParam() {
            return {
                projectId: this.projectId
            }
        }
    },
    mounted() {

    },
    methods: {
        //窗口新增
        add() {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open().setData({projectId: this.projectId})
            })
        },
        //窗口编辑
        table_edit(row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('edit').setData(row)
            })
        },
        //查看
        table_show(row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('show').setData(row)
            })
        },
        //删除明细
        async table_del(row, index) {
            const res = await this.$API.design.projectDict.delete(row.id);
            if (res.code === 200) {
                this.$refs.table.removeIndex(index)
                this.$message.success("删除成功")
            } else {
                await this.$alert(res.msg, "提示", {type: 'error'})
            }
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            //为了减少网络请求，直接变更表格内存数据
            if (mode === 'add') {
                this.$refs.table.refresh(data)
            } else if (mode === 'edit') {
                this.$refs.table.refresh(data)
            }

            //当然也可以暴力的直接刷新表格
            // this.$refs.table.refresh()
        },
        filterHandler(value, row, column) {
            const property = column['property']
            return row[property] === value
        },
        typeFormatter(row) {
            return row.type + (row.length === null ? '' : (row.scale === 0 ? `(${row.length})` : `(${row.length}, ${row.scale})`))
        }
    }
}
</script>

<style>
</style>
